<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">订单详情</div>
						<div><el-button type="success" class="book-add" @click="dialogVisible = true">商品查询</el-button>
							<el-button type="primary" class="book-add" @click="getOrderList">刷新数据</el-button>
						</div>
					</el-header>
					<el-table :data="orderList" border v-loading="isLoading" max-height="480">
						<el-table-column label="订单号" prop="ordid"></el-table-column>
						<el-table-column label="收货地址" prop="addr"></el-table-column>
						<el-table-column label="电话" prop="phone"> </el-table-column>
						<el-table-column label="发货单号">
							<template #default="scope">
								<p :class="{ nopay: scope.row.shipno == '' }">{{ fshipno(scope.row.shipno) }}</p>
							</template>
						</el-table-column>
						<el-table-column label="总价" prop="amount"></el-table-column>
						<el-table-column label="是否付款">
							<template #default="scope">
								<p :class="{ nopay: scope.row.ispay == 0 }" class="pays">
									{{ ftpay(scope.row.ispay) }}
								</p>
							</template>
						</el-table-column>
						<el-table-column label="下单时间">
							<template #default="scope">
								{{ ftime(scope.row.tcreate) }}
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template #default="scope">
								<el-popover placement="left" trigger="click" width="600">
									<template #reference>
										<el-button type="info" @click="showDetail(scope.row.ordid)">明细</el-button>
									</template>
									<el-aside>
										{{ scope.row.ordid }}#订单详情&nbsp;&nbsp;发往:{{
											scope.row.addr
										}}
									</el-aside>
									<el-table :data="showList" border class="img">
										<el-table-column label="图片">
											<template #default="scope">
												<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
											</template>
										</el-table-column>
										<el-table-column label="商品名称" prop="name" />
										<el-table-column label="商品价钱" prop="price" />
										<el-table-column label="商品数量" prop="num" />
										<el-table-column label="小计">
											<template #default="scope">
												{{ scope.row.price * scope.row.num }}
											</template>
										</el-table-column>
									</el-table>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>

		</div>

		<el-dialog v-model="dialogVisible" title="订单查询" width="30%">
			<el-form :model="formData" class="demo-form-inline" label-position="left">
				<el-form-item label="开始时间">
					<el-input type="date" v-model.lazy="formData.tstart"></el-input>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-input type="date" v-model.lazy="formData.tend"></el-input>
				</el-form-item>

				<el-form-item label="是否付款">
					<el-switch v-model="formData.isOpen" active-color="#13ce66" inactive-color="#ff4949" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="serchContent">
						查询
					</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 分页 -->
		<div class="book-pagination">
			<el-pagination background layout="prev, pager, next" :total="total" :page-size='num' @current-change='listbut'>
			</el-pagination>
		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
import { $get, $post } from "@/ajax";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			orderList: [],
			showList: [],
			total: 0,
			num: 20,
			closed: "",
			showLoading: showLoading,
			dialogVisible: false,
			formData: {
				tstart: '',
				tend: '',
				isOpen: false,
			},

		}
	},
	methods: {

		//点击切换到指定页数
		async listbut (x) {
			this.isLoading = true;
			const result = await $get(`/api/fore/ord/findOrdLineByPage/${x - 1}/${this.num}`);
			this.total = result.data.data.total - this.num;
			this.orderList = result.data.data.orders;
			if (result.status === 200) {
				this.showLoading();
			}
		},

		//获取列表
		async getOrderList () {
			this.isLoading = true;
			const result = await $get(`/api/fore/ord/findOrdLineByPage/${0}/${this.num}`);
			this.total = result.data.data.total - this.num;
			this.orderList = result.data.data.orders;
			if (result.status === 200) {
				this.showLoading();
			}
		},

		// 查看明细
		async showDetail (id) {
			const result = await $get(`/api/fore/ord/findInfoByOrdid/${id}`);
			if (result.data.code == 200) {
				this.showList = result.data.data.items;
			}
		},

		//查询
		async serchContent () {
			// isOpen 如果是 ture 则返回 0 false 则返回 1
			let isOpen = this.formData.isOpen ? 0 : 1;
			const data = {
				tstart: new Date(this.formData.tstart).getTime(),
				tend: new Date(this.formData.tend).getTime(),
				isOpen: isOpen,
			}
			// 判断时间输入框为NaN时, return
			if (isNaN(data.tstart) || isNaN(data.tend)) {
				this.$message({
					message: '查询日期不可为空',
					type: 'warning'
				});
				return;
			}
			this.isLoading = true;
			const result = await $post(`/api/fore/ord/findOrdLineByPage/${0}/${this.num}`, data);
			if (result.data.code == 200) {
				this.orderList = result.data.data.orders;
				this.total = result.data.data.total;
				this.dialogVisible = false;
				this.showLoading();
			}

		},
	},


	computed: {
		//时间过滤
		ftime () {
			return function (x) {
				let datas = new Date(x);
				let year = datas.getFullYear();
				let month = datas.getMonth() + 1;
				let day = datas.getDate();
				return `${year}-${month}-${day}`;
			};
		},
		// 过滤付款
		ftpay () {
			return function (x) {
				return x == 0 ? (x = "未付款") : (x = "已付款");
			};
		},

		fshipno () {
			return function (x) {
				return x == "" ? (x = "商家还在发货中……") : x;
			};
		},
	},

	created () {
		this.getOrderList()
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-top: -10px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}


.default {
	color: rgb(89, 166, 255) !important;
}

.nopay {
	color: rgb(139, 0, 0) !important;
}

.pays {
	color: green;
}

.img img {
	width: 40px;
	height: 40px;
}
</style>






